<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
	<link type="text/css" rel="stylesheet" th:href="@{/css/search.css}"/>

	<script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
	<script language='JavaScript' th:src="@{/ajax/layer/layer.min.js}"></script>
	<script language='javascript' th:src='@{/js/constant.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/jQuery/jquery.mousewheel.min.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/jquery-easyui-1.5.1/jquery.easyui.min.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.min.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/bootstrap-table/bootstrap-table.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/adminLTE/js/app.min.js}'></script>
	<script language='JavaScript' th:src='@{/plugin/lobibox/dist/js/lobibox.js}'></script>
	<script language='JavaScript' th:src='@{/js/network.js}'></script>
	<script language='JavaScript' th:src='@{/js/common.js}'></script>
	<script language='JavaScript' th:src='@{/js/public.js}'></script>
</head>
<body class="body-contrainner fadeInUp" style="background-color: white;">
    <div class="xinxikf_num1"><i></i><span class="xinxikf_font1">OA主数据搜索引擎</span>
<!--     			<span id="countzs" class="xinxikf_font2">22934</span>个 -->
    			</div>
    <div class="xinxikf_search" id="">
    <form id="form-search" class="form-inline has-info" style="padding-bottom: 10px;">
	<div id="searchType" class="search radius6">
            <input class="inp_srh" name="content_like" id="content_like" autocomplete="off" >
            <input class="btn_srh" type="button" id="key-search" name="subQuery" value="搜索一下">
    </div>
    </form>
	</div>
	<div class="tab-content" style="padding-left:172px;padding-right:172px;display:none;">
            <div class="tab-pane active" id="tab1" >
	<table id="table" class="table table-bordered" data-striped="true" data-pagination="true" data-search="false"
	        data-search-on-enter-key="true" data-show-columns="false" data-show-refresh="false"
	        data-show-toggle="false" data-show-pagination-switch="false" data-id-field="id"
	        data-unique-id="id" data-click-to-select="true" data-side-Pagination="server"
	        data-cache="false" data-method="get" data-query-params="getParam1" style="font-size:14px;">
	     <thead>
	     <tr>
<!-- 	         <th data-field="state" data-radio="true"></th> -->
	         <th data-field="rowNum" data-align="left" data-halign="left" data-valign="middle" data-formatter=bootstrapFormatter.rowNumFormatter>序号</th>
	         <th data-field="tableName" data-align="left" data-halign="left" data-valign="middle" data-sortable="true">表名</th>
	         <th data-field="columnName" data-align="left" data-halign="left" data-valign="middle" data-sortable="true">字段名</th>
	         <th data-field="sData" data-align="left" data-halign="left" data-valign="middle" data-sortable="true" data-formatter="displaycolor">数据</th>
	         <th  data-align="left" data-halign="left" data-valign="middle" data-sortable="true" data-formatter="setButton">明细查询</th>
	     </tr>
	     </thead>
	 </table>
	 </div>
	 </div>
	 
	<div id="input-modal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content" style="min-width: 1000px;margin-left:-200px;" >
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<center><span  style="font-size:20px;">明细显示</span></center>
				</div>

				<div class="modal-body">
				<table id="data-table" class="table table-bordered"
				data-method="get" data-side-Pagination="server" data-pagination="true"
				data-striped="true" data-id-field="id" data-unique-id="id" data-click-to-select="true" 
				data-search="false"  data-cache="false"  data-query-params="getParam">
					<thead>
						<tr id='tab'>
						</tr>
					</thead>
				</table>
				</div>
				<div class="modal-footer">
					<center><button id="btn-cancel2" type="button" class="btn btn-default" data-dismiss="modal">关闭</button></center>
				</div>
			</div>
		</div>
	</div>
	    <form id="form-search1">
			<input id="tableName" name="tableName" type="hidden" value="">
			<input id="columnName" name="columnName" type="hidden" value="">
			<input id="message" name="message" type="hidden" value="">
	    </form>
    <script language="JavaScript">
    function getParam1(params) {
        return commonTools.getBootstrapParams(params, $("#form-search"));
    }
    function getParam(params) {
        return commonTools.getBootstrapParams(params, $("#form-search1"));
    }
    $("#key-search").click(function () {
    	$("#table").bootstrapTable("destroy");
        $("#table").bootstrapTable({url: publicData.urls.dataSearch.getDataByKey});
        $(".tab-content").show(50);
    });
    /* 关键字高亮 */
    function displaycolor(value,row,index) {  
        var a = ""; 
        /* 获取关键字 */
        var b=document.getElementById("content_like").value;
        //将value数据根据关键字拆分
        if(b!=''){
        	var arr = value.split(b);
            var a = '<span style="color:#ff0000">'+b+'</span>';
            //将改完格式的关键字拼接进数组
            var portableList=arr.join(a);
            return portableList; 
        }else{
        	var portableList = '<span>'+value+'</span>'; 
        	return portableList;
        }
         
       }
    function getMessage(tableName,columnName,Message){
    	$("#data-table").bootstrapTable("destroy");
    	$("#tableName").val(tableName);
    	$("#columnName").val(columnName);
    	$("#message").val(Message);
	  ajax.getData(publicData.urls.dataSearch.getColumns, {'tableName':tableName}, function (data) {
/* 		  <th data-field="state" data-radio="false"></th>
 */		  
                 var html='';
 		      for(var i = 0;i < data.length;++i){
		    	var codeAndInfo = data[i];
  	        	html+='<th data-field="'+codeAndInfo+'" data-align="left" data-halign="left"'
  						+'data-valign="middle" data-sortable="true">'+codeAndInfo+'</th>';
 	          } 
 	          $("#tab").html(html);
 	          if ( data!=null||data!="") {
 	        	 $("#data-table").bootstrapTable("refresh");
	          	 $("#data-table").bootstrapTable({url: publicData.urls.dataSearch.getPage});
	           }else{
	        	   $("#tab").html("不存在");
	           } 
	      	$("#input-modal").modal("show")
		 	});
    }
    
    function setButton(value,row,index){
		return '<span style="text-align: center;display:block;" onclick="getMessage(\''+row.tableName+'\',\''+row.columnName+'\',\''+row.sData+'\')"><label class="label label-success label-block" style="cursor:pointer">查看明细</label></span>';

    } 
    </script>
</body>
</html>